<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>jQuery Transitions Test</title>
		<style>
			body{
				font-family:Georgia;
				font-size:13px;
				color:#eee;
				background:url(images/background.jpg);
			}
			
			#grid{
				background:url(images/box.jpg);
				width:490px;
				height:490px;
				margin:auto;
			}
			
			.hidden{
				display:none;
			}
			
			.alignleft{
				float:left;
			}
			
			.alignright{
				float:right;
			}
			
			.aligncenter{
				margin:0px auto;
			}
			
			.center{
				text-align:center;
			}
			
			div.transitions{
				position:relative;
				overflow:hidden;
			}
			img.loading{
				position:absolute;
				top:50%;
				left:50%;
				margin-top:-16px;
				margin-left:-16px;
				z-index:500;
			}
			
		</style>
	</head>
	<body>
	    <div id="grid" class="transitions">
	    	<div>
	    		<h1>Choose an app!</h1>
	    		<ul>
	    			<li id="wordpress"><a href="installer.php?app=wordpress">WordPress</a></li>
	    			<li id="bbpress"><a href="installer.php?app=bbpress">bbPress</a></li>
	    			<li id="mediawiki"><a href="installer.php?app=mediawiki">Media Wiki</a></li>
	    			<li id="joomla"><a href="installer.php?app=joomla">Joomla</a></li>
	    			<li id="phpbb"><a href="installer.php?app=phpbb">phpBB</a></li>
	    			<li id="drupal"><a href="installer.php?app=drupal">Drupal</a></li>
	    			<li id="trac"><a href="installer.php?app=trac">Trac</a></li>
	    		</ul>
	    	</div>
	    </div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

		<script type="text/javascript">
			(function($)
			{
				$.fn.transition = function(url, options)
				{
					div = this;
					var defaults =
					{
						transitionType : 'slide',
						slideBack : false,
						duration : 500,
						loadingGif : 'loading.gif',
					}
					var options = $.extend(defaults, options);
					//display loading gif
					//$(div).append('<img class="loading" src="' + options.loadingGif + '"/ > ').fadeTo(0.5);
					$('body').append('<div class="ajaxTemp"></div>');
					$('div.ajaxTemp').hide();
					$('div.ajaxTemp').load(url, function()
					{
						var ajaxHtml = $('div.ajaxTemp').html();
						$('img.loading').fadeOut(200, function(){$(this).remove()});
						$(div).find('div').addClass('prevslide').fadeOut("fast", function () 
						{
							$(div).append('<div></div>')
							$(div).find('div').hide().html(ajaxHtml);
							$('div.ajaxTemp').remove();
							$(div).find('div').fadeIn(200);
						});
					});
				}
			})(jQuery);
			$(document).ready(function ()
			{
				$('#wordpress a').click(function ()
				{
					$('div.transitions').transition('worknow.html');
					return false;
				});
			});
		</script>

	</body>
</html>
<!--  Chat, Notes, Comments, ToDo List, etc...

Todo
----------------------------
	Center loading gif @Donald #done
	Ajaxy stuff #done
	Do the fancy jQuery stuff that confuses Joel @Donald :P #done :P


-->